<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<style>
			/*1. 控制字体：字体家族属性 */
			/* * */ {
				/* font-family指定字体：常用：微软=雅黑、宋体 */
				font-family: 微软雅黑,sans-serif;
				/* 用户电脑端可能不存在指定字体，按照顺序在指定一个字体，如果存在选定字体
				 sans-serif 无衬线字体，理解：黑体
				 */
				/* 字体尺寸属性 px单位；绝对值
								em单位：相对于父元素字体大小 倍数【移动端】
				*/
				
				font-size: 1.5em;
			考试	/* 字体加粗属性 ：属性值：【数值整数范围：100~900】 400等于 normal
									属性值：【英文：normal、bold】   900 等于 bold
									*/
			font-weight:400 ;
			/* 字体样式属性： */
			font-style: initial;
			/* 文本转换属性： uppercase转大写、lowercase转小写、capitalize转单词首字母大写 */
			text-transform: uppercase;
			text-transform: lowercase;
			text-transform: capitalize;
			/* 首行缩进属性 */
			text-indent: 200px;
			}
			/* 2.控制文本属性 */
			h1+p{
				border: 1px solid red;
				/* text-algin文本对齐属性：left|right|center【具备宽度空间】
										justify 【文本内容足够，两端对齐】
										*/
				text-al ign: left;
				text-alig n: right;
				text-alig n: center;
				text-align: justify;
				/* line-height行高属性：数值px、主要功能：文本垂直居中，高度与行高一致 */
				line-height:40px;
			    line-height: 40px;
				/* letter-spacing：【正负】数值px   设置字符的间距 */
				letter-spacing:1px;
				/* word-spacing ：【正负】数值px   设置单词的间距 */
				 word-spacing:10px;
			}
			/* 3.文本装饰效果 */
			div a{
				border: 1px solid #ccc;
				padding:15px;
				margin-left: 5px;
				border-radius: 5px;
				
				}
				div a.current{/* 加权重 */
					border:0;
					color: #000;
					/* text-decoration 超文本文本装饰属性：none去掉下划线
					                                     underline 默认 自带下划线
														 line-through 删除线
					 
					 */
					text-decoration: none;
				}
				div p{
					/* 文本阴影属性：【阴影三种：过滤：下阴影/文本阴影/盒子阴影】*/
					/*           X   Y   模糊程度  颜色 */
					text-shadow:5px 5px 10px #55ff7f ;
				}
				/*4.处理文本溢出属性 */
				div>span{
					/* white-space文本换行属性：nowrap 不换行
					                           pre    保留空格与换行    
											   normal  默认，空格合并，自动换行，回车不管
											   */
					border: 1px solid red;
					white-space: nowrap;
					white-space: pre;
					white-space: normal;
				}
				
		</style>
	</head>
	<body>
		<!-- 文本格式化属性：页面上文或者字体
		 四种用途：①控制字体：font-family、font-sizs、font-weight等
				②控制文本布局；text-align、line-height、letter-spacing等
				③文本装饰效果：text-decoration、text-shadow等
				④处理文本溢出：overflow、white-space等
		 -->
		 <h1>控制字体属性：font-family、font-size、font-weight</h1>
		 
		 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab ipsam temp
		 ore cupiditate sunt inventore expedita ea architecto sit amet quo
		 s nisi recusandae, dolorem maiores! Aperiam minus repellendus ut re
		 pudiandae delectus?
		 <h1>控制文本布局：text-algin  line-height </h1>
		 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque h
		 ic perspiciatis eos dicta voluptates
		  omnis sed voluptas, labore dolore aut sint 
		  um, laudantium, doloribus nihil assumenda pos
		  simus sunt a. Nemo?
		  </p >
		  <h1>文本装饰效果</h1>
		  <div>
			<a href=" " class="current">1</a >
			<a href="#">2</a >
			<a href="#">3</a >
			<a href="#">4</a >
			<a href="#">5</a >
			<a href="#">6</a >
			<p>文本阴影效果</p>
		  </div>
		  <h1>处理文本溢出与换行</h1>
		  <div>
		  <span>  
		 </div>lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam odit quas animi sapiente inventore earum accusamus et, autem pariatur sed totam, eius rerum tenetur nam velit eos, doloribus unde assumenda.
		  </span>
		  </div>
	</body>
	
</html>